<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst_content">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
            <el-table :data="unread" :show-header="false" style="width: 100%">
              <el-table-column>
                <template #default="scope">
                  <span class="message-title">{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" width="180"></el-table-column>
              <el-table-column width="120">
                <template #default="scope">
                  <el-button size="small" @click="handleRead(scope.$index)"
                    >标为已读</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="handle-row">
              <el-button type="primary">全部标为已读</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="`已读消息(${read.length})`" name="second">
            <el-table :data="read" :show-header="false" style="width: 100%">
              <el-table-column>
                <template #default="scope">
                  <span class="message-title">{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" width="180"></el-table-column>
              <el-table-column width="120">
                <template #default="scope">
                  <el-button type="danger" @click="handleDel(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="handle-row">
              <el-button type="danger">删除全部</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
            <el-table :data="recycle" :show-header="false" style="width: 100%">
              <el-table-column>
                <template #default="scope">
                  <span class="message-title">{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" width="180"></el-table-column>
              <el-table-column width="120">
                <template #default="scope">
                  <el-button @click="handleRestore(scope.$index)"
                    >还原</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="handle-row">
              <el-button type="danger">清空回收站</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
    
    
<script>
    
export default {
    data() {
      return {
        activeName: 'first',
        unread: [
                {
                    date: "2023-08-08 15:00:00",
                    title: "【系统通知】前后端分离Ele+Vue 阿金",
                },
                {
                    date: "2023-08-08 15:00:00",
                    title: "【系统通知】前后端分离Ele+Vue 阿金",
                },
            ],
            read: [
                {
                    date: "2023-08-08 15:00:00",
                    title: "【系统通知】前后端分离Ele+Vue 阿金",
                },
            ],
            recycle: [
                {
                    date: "2023-08-08 15:00:00",
                    title: "【系统通知】前后端分离Ele+Vue 阿金",
                },
            ],
      };
    },
    methods: {
        handleRead(index){
            const item = this.unread.splice(index, 1);
            this.read = item.concat(this.read);
        },
        handleDel(index){
            const item = this.read.splice(index, 1);
            this.recycle = item.concat(this.recycle);
        },
        handleRestore(index){
            const item = this.recycle.splice(index, 1);
            this.read = item.concat(this.read);
        }
    }
  };
</script>

<style scoped>
.el-tabs {
  width: 96%;
  margin-left: 2%;
  height: 96%;
  margin-top: 2%;
  float: left;
  .el-tab-pane {
    color: #20a0ff;
  }
  .handle-row {
    margin-top: 20px;
  }
}
.message-title {
  color: #20a0ff;
}
</style>
    